<!-- 商品列表 -->
<template>
  <view class="goods-component" :class="{ detail: mode == 'detail' }">
    <template v-if="true">
      <template v-for="(goods, index) in [1,2,3,4,5]" :key="index">
        <view class="item" @click="onGoodsTap(goods)">
          <!-- 商品缩略图 -->
          <view class="goods-pic">
            <image :src="'../../static/images/delete/g'+ goods +'.jpg'" mode="scaleToFill"></image>
          </view>
          <!-- 商品标题 -->
          <view class="goods-title">
            新手专享盲盒大杂烩
          </view>
          <!-- 商品金额 -->
          <view class="goods-price">
            <text>￥99999.99</text>
            <text class="reference" v-if="mode === 'detail'">参考价</text>
          </view>
          <!-- 标签 -->
          <view class="goods-tag" v-if="mode === 'detail' && true" 
          :style="{ backgroundImage: 'linear-gradient(#F6D4C2 5%,'+ GOODS_TAG.info(GOODS_TAG.SUPREME).color[1] +')' }">
            {{ GOODS_TAG.info(GOODS_TAG.SUPREME).desc }}
          </view>
        </view>
      </template>
    </template>
    <template v-else>
      <Empty />
    </template>
  </view>
</template>

<script>
import { defineComponent } from 'vue'
import GOODS_TAG from '@/common/constant/goods-tag.js'
import Empty from '@/components/empty/empty.vue'

export default defineComponent({
  name: "GoodsList",
  components: {
    Empty
  },
  props: {
    /**
     * 列表模式 index - 首页使用的列表, detail - 商品详情使用的列表 含标签，该模式下的价格将显示为参考价格
     */
    mode: { type: String, default: "index" },
    /**
     * 商品列表
     * example 
     * {
     *   id: 1,
     *   title: "新手专享盲盒大杂烩",
     *   thumb: "http://www.baidu.com/pic.jpg",
     *   price: "99.99",
     *   // 标签 状态 0 或 null 不显示, 1 - 至尊款, 2 - 稀有款, 3 - 豪华款, 4 - 普通款
     *   tag: 1,
     *   ....
     *   ...
     * }
     * 
     */
    goods: { type: Array, default: () => [] }
  },
  setup(props, ctx) {
    
    const onGoodsTap = (item) => {
      const url = props.mode == "index" ? "/pages/box-detail/box-detail" : "/pages/goods-detail/goods-detail";
      uni.navigateTo({url: url + "?id=1"});
    }
    
    return {
      GOODS_TAG,
      onGoodsTap
    }
  }
});
</script>

<style scoped lang="scss">
@import '@/static/styles/variables.scss';

.goods-component {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  
  .item {
    width: 50%;
    margin-bottom: 40rpx;
    position: relative;
    
    &:nth-child(even) {
      
      width: calc(50% - 20rpx - 1rpx);
      
      .goods-pic {
        padding-left: 20rpx;
        border-left: 1rpx solid #EEEEEE;
      }
      
      .goods-tag {
        left: 40rpx;
      }
    }
    
    .goods-pic {
      height: 340rpx;
      margin-bottom: 30rpx;
      
      > image {
        width: 100%;
        height: 100%;
      }
    }
    
    .goods-title {
      width: 100%;
      overflow:hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 32rpx;
      padding: 0 20rpx;
    }
    
    .goods-price {
      font-size: 32rpx;
      color: $primaryColor;
      padding: 0 20rpx;
    }
    
    .goods-tag {
      position: absolute;
      left: 20rpx;
      top: 20rpx;
      background-image: linear-gradient(#FF0000,#000);
      padding: 4rpx 16rpx;
      border-radius: 10rpx;
      color: #fff;
      font-size: 24rpx;
    }
  }
}

.goods-component.detail {
  .item .goods-price {
    font-weight: bold;
    color: #111111;
    
    .reference {
      color: #8A8A8A;
      margin-left: 20rpx;
      font-size: 28rpx;
    }
  }
}
</style>